.demo1{
    padding: 20px;
    .btn{
        display: inline-block;
        margin: 0 20px;
        padding: 0 20px;

        height: 40px;
        line-height: 40px;

        background-color: #eee;
        cursor: pointer;
    }


    $color:(1:red,2:blue,3:green,4:black,5:grey);
    @each $i, $c in $color{
        .focus-color-#{$i}{
            -webkit-transition: all .25s ease;
               -moz-transition: all .25s ease;
                -ms-transition: all .25s ease;
                    transition: all .25s ease;
            &.btn:hover, &.btn.show{
                background-color: $c;
                color:#fff;
            }
        }
    
    }
    

    .round{
        border-radius: 50%;
    }

    input{
        height:40px;
        light-height:40px;
        padding: 0 4px;
        border:1px solid #eee;
        outline: none;
        margin: 0 20px;
        -webkit-transition: all .25s ease;
           -moz-transition: all .25s ease;
            -ms-transition: all .25s ease;
                transition: all .25s ease;

        &.focus-0 {
            &:focus{
                box-shadow: 0 0 4px green;
            }
        }
        &.focus-1{
            border: none;
            border-bottom: 1px solid lightgrey;
            &:focus{
                border-bottom: 1px solid green;
            }
        }
        &.focus-2{
            border-radius: 20px;
            &:focus{
                box-shadow: 0 0 4px green;
            }
        }

        &.focus-3{
            @extend .focus-2;
            @extend .z-depth-1;
        }

        &.focus-4{
            &:focus{
                outline: 2px solid green;
            }
        }
    }

    .focus-wrapper {
        display: inline-block;
        border: 2px solid transparent;
        border-radius: 2px;
        -webkit-transition: all .25s ease;
           -moz-transition: all .25s ease;
            -ms-transition: all .25s ease;
                transition: all .25s ease;
        &:hover, &.show{
            padding: 2px;
            border:2px solid green;
        }
    }

    .input-field.bordered{
            position: relative;
            left: 40%;
            top: 30px;
            width: 120px;
            height: 40px;
            input{
                position: absolute;
                width: 100%;
                z-index: 2;

                &:focus{
                    border:1px solid green;
                }
                &:focus ~ .top, &:focus ~ .bottom{
                    opacity: 1;
                    left: 30px;

                    width: 100%;
                }
                &:focus ~ .left, &:focus ~ .right{
                    opacity: 1;
                    top: 0;
                    height: 100%;
                }
            }
            span{
                position: absolute;
                display: block;
                z-index: 1;

                -webkit-transition: all .4s ease;
                   -moz-transition: all .4s ease;
                    -ms-transition: all .4s ease;
                        transition: all .4s ease;
                &.top, &.bottom{
                    left: -100%;
                    height: 0;
                    width: 200%;
                    border-top: 1px solid green;
                    opacity: 0;
                }
                &.bottom{
                    bottom: 0;
                    left: 100%;
                }
                &.left, &.right{
                    top: 100%;
                    left: 20px;
                    width: 0;
                    height: 200%;
                    border-left: 1px solid green;
                    opacity: 0;
                }
                &.right{
                    top:-100%;
                    left: 124%;
                }
            }
        }

    $depth:(0, 1,2,3,4,5);
    @each $d in $depth{
        .z-depth-#{$d} {
            -webkit-transition: all .25s ease;
               -moz-transition: all .25s ease;
                -ms-transition: all .25s ease;
                    transition: all .25s ease;

            &:hover, &.show{
                box-shadow: 0px 2px + 4px*$d 5px*$d 0 rgba(0, 0, 0, 0.2), 0 2px + 4px*$d 10px*$d 0 rgba(0, 0, 0, 0.2);
                @if $d==0{
                    box-shadow: none !important;
                }
            }

        }
    }

    table{
        padding: 20px;
        border: 1px solid #ccc;
        border-collapse: collapse;
        td{
            padding: 10px 20px;
        }

        tr.focus{
            &:hover{
                background-color: green;
            }
        }
    }
}